"use strict";

import AV from "leancloud-storage";
const { Query, User } = AV;
import "water.css/out/light.min.css";
import appConfig from "./config.json";


AV.init({
    appId: appConfig.AppID,
    appKey: appConfig.AppKey,
    serverURL: appConfig.ServerURL
});

const social = AV.Object.extend('social_data');

let refreshBtn = () => {
    window.location.reload();
}

let newConversation = () => {
    document.querySelector("#container").setAttribute("style", "display:none");
    document.querySelector("#newConversationDialog").setAttribute("style", "");
}

let viewConversation = (title, sender, content) => {
    document.querySelector("#container").setAttribute("style", "display:none");
    document.querySelector("#viewConversationDialog").setAttribute("style", "");
    document.querySelector("#viewConversationTitle").innerText = title;
    document.querySelector("#viewConversationSender").innerText = sender;
    document.querySelector("#viewConversationContent").innerText = content;
}

let viewConversationList = () => {
    let query = new AV.Query('social_data');
    query.find().then((data) => {
        for (let i = 0; i < data.length; i++) {
            let newEl = document.createElement("li");//创建元素            
            newEl.innerText = data[i].attributes.title;
            newEl.style = "color:#3989a8;margin-top:10px;font-size:20px;text-decoration:underline";
            newEl.onclick = () => { viewConversation(data[i].attributes.title, data[i].attributes.sender, data[i].attributes.content) }
            document.querySelector("#conversationList").appendChild(newEl);
        }
    });
}

let closeViewConversationDialog = () => {
    document.querySelector("#container").setAttribute("style", "");
    document.querySelector("#viewConversationDialog").setAttribute("style", "display:none");
    document.querySelector("#viewConversationTitle").innerHTML = "";
    document.querySelector("#viewConversationSender").innerHTML = "";
    document.querySelector("#viewConversationContent").innerHTML = "";

}

let publishConversation = () => {
    let newConversationSender = document.querySelector("#newConversationSender").value;
    let newConversationTitle = document.querySelector("#newConversationTitle").value;
    let newConversationContent = document.querySelector("#newConversationContent").value;

    let newpost = new social();
    newpost.set('title', newConversationTitle);
    newpost.set('sender', newConversationSender);
    newpost.set('content', newConversationContent);
    newpost.save().then(() => {
        document.querySelector("#newConversationSender").value = "";
        document.querySelector("#newConversationTitle").value = "";
        document.querySelector("#newConversationContent").value = "";
        window.location.reload();
    });

}

let cancelPublishConversation = () => {
    document.querySelector("#container").setAttribute("style", "");
    document.querySelector("#newConversationDialog").setAttribute("style", "display:none");
}

document.querySelector("#refreshBtn").onclick = refreshBtn;
document.querySelector("#newConversationBtn").onclick = newConversation;
document.querySelector("#publishConversationBtn").onclick = publishConversation;
document.querySelector("#cancelPublishConversationBtn").onclick = cancelPublishConversation;
document.querySelector("#closeViewConversationDialog").onclick = closeViewConversationDialog;

viewConversationList();

